import React, { Component, render } from './react'

const root = document.getElementById('root')
const jsx = (
  <div>
    <p>hello fiber!</p>
    <p>hi fiber!</p>
  </div>
)
// render(jsx, root)
// !节点更新
setTimeout(() => {
  const jsx = (
    <div>
      <p>hi fiber!</p>
    </div>
  )
  // render(jsx, root)
}, 2000)

//! 类组件
class Greating extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '张三'
    }
  }
  render () {
    return (<div>
      <div>{this.props.title} Greating  {this.state.name}</div>
      <button onclick={() => this.setState({ name: '李四' })}>点击</button>
    </div>)

  }
}

render(<Greating title="hello" />, root)
//! 组件装填更新

//! 函数组件
function FnComponent (props) {
  return <div>{props.title} FnComponent</div>
}
// render(<FnComponent title="hello" />, root)
